<template>
    <header>
        <div class="l-content">
            <el-button icon="el-icon-menu" @click="collapseMenu" size="small" circle></el-button>
            <el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item :to="current.path" v-if="current">
			  {{current.label}}
			  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="r-content">
            <el-dropdown>
            <span class="el-dropdown-link">
                <img :src="userImg" alt="" class="user_img">
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
        </div>
    </header>
</template>

<script>
//辅助函数mapState
import {mapState,mapMutations} from 'vuex'
export default {
    computed:{
        ...mapState({
            current:state => state.tab.currentMenu
        })
    },
    data(){
        return{
            userImg:require('../assets/img/sixstar_logo.png')
        }
    },
    methods:{
        ...mapMutations([
            "collapseMenu",
        ]),
        //上面的辅助函数相当于下面的
        // mapMutations(){
        //     this.$store.commit('collapseMenu')
        // }
    }
}
</script>

<style lang="scss" scoped>/* 使用scss进行嵌套 scoped覆盖组件原本样式*/
    header{
        display:flex;
        height:100%;
        /* 垂直居中对齐 */
        align-items: center;
        justify-content:space-between;
        .el-button{
            margin:20px;
        }
        .l-content{
            display:flex;
            align-items: center;
        }
        .r-content{
            .user_img{
                width: 40px;height:40px;border-radius:50%;
            }
        }
    }
</style>
<style lang="scss">
	.el-breadcrumb__item{
		.el-breadcrumb__inner{
            color:#000000;
		}
	}
	.el-breadcrumb__item:last-child .el-breadcrumb__inner{
		color:#fff;
	}
	
</style>